<%var csstpl = {%>
    <link href="${basepath}/vendor/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <style>
    	.empty { height:400px; background:url("${basepath}/vendor/img/list_empty.png") no-repeat center; }
    </style>
<%};%>
<%var jstpl = {%>
<script>
var app = new Vue({
	el: ".wrapper",
	data: {
		query: {
			pageNumber: 1,
			pageSize: 10,
			order_id:"${order_id!}",
			type:""
		},
		data_result: {},
		sumMoney:0
	},
	created: function() {
		this.loadPage("init");
	},
	methods: {
		loadPage: function(model) { //载入模式有两种  init初始化载入 load分页载入
			this.query.startTime=$("#start").val();
			this.query.endTime=$("#end").val();
			
			if(model == "init") {
				this.query.pageNumber = 1;
			}
			Ajax("/shangjia/order/getCommissionDetails/${order_id!}", this.query, function(d) {
				app.data_result = d.page;
				app.sumMoney=d.sumMoney==null?0:d.sumMoney;
				if(d.page.firstPage == true) {
					laypage({
					    cont: 'page1',
					    skin: 'molv',
					    skip: true, //是否开启跳页
					    curr: 6, //初始化当前页
					    pages: d.page.totalPage, //可以叫服务端把总页数放在某一个隐藏域，再获取。假设我们获取到的是18
					    curr: function(){ //通过url获取当前页，也可以同上（pages）方式获取
						return d.page.pageNumber;
					    }(),
					    jump: function(obj, first){ //触发分页后的回调
					        app.query.pageNumber = obj.curr;
							if(app.query.pageSize != obj.limit) {
								app.query.pageSize = obj.limit;
								app.loadPage("init");
								return;
							}
							if(!first) {
								app.loadPage("load");
							}
					    }
					});
			   }
			})
		}
	}
})

$("#type").on("change",function(){
	app.query.type=$(this).val();
	app.loadPage("init");
})
</script>
<%};%>
<%layout("../layout/_layout.html",{title:'小金娱',jstpl:jstpl,csstpl:csstpl}){ %>
<div class="wrapper wrapper-content animated fadeInUp" v-cloak>
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox">
				<div class="ibox-title">
					<h5>佣金详情</h5>
				</div>

				<form type="post" action="/shangjia/accountLog" class="form-inline">
					<div class="ibox-content">
						<div class="row m-b-sm m-t-sm">
							<div class="col-md-9">
								<div class="form-group">
									 <label class="form-label">类型:</label>
									 <select id="type" class="form-control">
									 		<option value="">请选择</option>
									 		<option value="1">分销</option>
									 		<option value="2">合伙人</option>
									 	</select> 
								</div>
							</div>
							
							<div class="col-md-3">
								<div class="form-group">
                                       <h3 style="display: inline;color: red ; margin-left: 15px;">总金额:{{sumMoney}}</h3>
								</div>
							</div>
							
						</div>

						<div class="project-list">

							<table class="table table-hover">
								<tbody>
									<thead>
										<tr>
											<th>头像</th>
											<th>用户名</th>
											<th>类型 </th>
											<th>佣金金额</th>
										</tr>
									</thead>

									<tr v-for="d in data_result.list">
										<td class="project-people" style="text-align:left;">
                                            <img alt="image" :src="d.headimgurl+'?imageView2/1/w/450/h/320'" style="border-radius:100%;">
                                   		</td>
										<td class="project-title t1">
											{{d.nickname}}
										</td>
										<td class="project-title t1">{{d.type==1?'分销'+d.income_level+'级佣金':'合伙人佣金'}}</td>
										<td class="project-title t1">{{d.money}}</td>
									</tr>

								</tbody>

							</table>
							<div v-if="data_result.list==0" class="empty"></div>
						</div>
					</div>
					<br/>
					<div class="dt_footer">
					<div class="row-fluid">
					<div class="span4"><div class="dataTables_info" id="demo-dtable-03_info">当前 {{data_result.pageNumber}} 共 {{data_result.totalPage}}页 {{data_result.totalRow}} 条信息</div></div>
					<div class="span8">
					<div id="page1" class="dataTables_paginate paging_bootstrap pagination">
					</div>
					</div>
					</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<%}%>